<div ng-init="init();" class="kmi-layout-content OPM01-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="brand-title">
            <div class="custom" ng-if="companyName">
                <div class="title" ng-bind="companyName"></div>
                <img src="" alt="" class="brand">
                <div class="gap"></div>
            </div>
            <div class="digiwin">
                <img src="image/smes_v340/logo_ch.png" alt="">
                <img src="image/smes_v340/logo_en.png" alt="">
            </div>
        </div>
        <div class="header-title" ng-bind="'OPM01.title' | translate"></div>
        <div class="header-logo"></div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page">
            <div class="price-report-panel">
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.user_no' | translate"></label>
                    <input style="flex: 0 0 15%;" ng-model="opmList.user_no"></input>
                    <div class="tip search" ng-click="loadUserNo();"><img src="image/icons/search.png"></img> </div>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.user_name' | translate"></label>
                    <label ng-bind="opmList.user_name"></label>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.report_reason' | translate"></label>
                    <input class="input" ng-model="opmList.report_reason" ng-click="loadReportReason();" readonly></input>
                    <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.type' | translate"></label>
                    <label class="value" ng-bind="'OPM01.type_no_' + opmList.type_no | translate"></label>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.start_time' | translate"></label>
                    <input ng-model="opmList.start_date" style="flex: 0 0 108px;" ng-click="changeStartDate();" readonly></input>
                    <input ng-model="opmList.start_time" style= "flex: 0 0 84px; border-left: 0px;" ng-click="changeStartTime($event);" readonly></input>
                    <label class="label" ng-bind="'OPM01.end_time' | translate"></label>
                    <input ng-model="opmList.end_date" style="flex:0 0 108px;" ng-click="changeEndDate();" readonly></input>
                    <input ng-model="opmList.end_time" style= "flex:0 0 84px; border-left: 0px;" ng-click="changeEndTime($event);" readonly></input>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.output' | translate"></label>
                    <input style="flex: 0 0 108px;" ng-model="opmList.output" ng-click="modifyOutputValue($event);"
                           ng-show="opmList.report_reason != ''" readonly></input>
                    <label style="margin-left: 5px;" ng-bind="'OPM01.output_unit_qty' | translate" ng-show="opmList.report_reason != '' && opmList.type_no == 0"></label>
                    <label style="margin-left: 5px;" ng-bind="'OPM01.output_unit_hours' | translate" ng-show="opmList.report_reason != '' && opmList.type_no == 1"></label>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.unit_price' | translate"></label>
                    <input style="flex: 0 0 108px;" ng-model="opmList.unit_price" ng-click="modifyUnitPriceValue($event);" 
                           ng-show="opmList.report_reason != '' && opmList.is_modify == '1'" readonly></input>
                    <label ng-bind="opmList.unit_price" ng-show="opmList.report_reason != '' && opmList.is_modify == '0'"></label>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.total_amount' | translate"></label>
                    <input style="flex: 0 0 108px;" ng-model="opmList.total_amount" ng-show="opmList.report_reason != ''" readonly></input>
                    <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="whetherToDeduct();" 
                            style="flex: 0 0 100px; height: 32px;" ng-show="opmList.report_reason != ''">
                        <img ng-show="!opmList.whether_to_deduct" src="image/icons/check0.png"></img>
                        <img ng-show="opmList.whether_to_deduct" src="image/icons/check1.png"></img>
                        {{'OPM01.whether_to_deduct' | translate}}
                    </button>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.product_no' | translate"></label>
                    <input class="input" ng-model="opmList.product_no"></input>
                    <div class="tip search" ng-click="loadProductNo();"><img src="image/icons/search.png"></img> </div>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.product_name' | translate"></label>
                    <label ng-bind="opmList.product_name"></input>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.wo_no' | translate"></label>
                    <input class="input" ng-model="opmList.wo_no"></input>
                    <div class="tip search" ng-click="loadWoNo();"><img src="image/icons/search.png"></img> </div>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.lot_no' | translate"></label>
                    <input class="input" ng-model="opmList.lot_no"></input>
                    <div class="tip search" ng-click="loadLotNo();"><img src="image/icons/search.png"></img> </div>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.op_no' | translate"></label>
                    <input class="input" ng-model="opmList.op_no"></input>
                    <div class="tip search" ng-click="loadOpNo();"><img src="image/icons/search.png"></img> </div>
                </div>
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'OPM01.description' | translate"></label>
                    <textarea rows="3" style="margin-top: 45px; flex: 0 0 50%;" ng-model="opmList.description" ng-show="opmList.report_reason != ''"></textarea>
                </div>
            </div>
        </div>
        <div class="btn-panel">
            <div class="kmi-button kmi-button-confrim btn-confirm" ng-click="confirm()" style="width: 100px;">
                <label ng-bind="'OPM01.btn.confirm' | translate"></label>
                <div class="kmi-can-click"></div>
            </div>
            <div class="kmi-button kmi-button-confrim btn-confirm" ng-click="reset()" style="width: 100px; background: gray;">
                <label ng-bind="'OPM01.btn.reset' | translate"></label>
                <div class="kmi-can-click"></div>
            </div>
        </div>
    </div>
</div>
